<template>
  <div class="c-bg-sgray c-p">
    <div class="c-ph24 c-pv30">
      <div class="c-fs26 c-fc-xblack c-fw700">题目设置</div>
      <!-- 练习选择 -->
      <div class="c-flex-row c-aligni-center c-bg-white c-br20 c-mt24 c-pl30 c-pr20  c-pb18" @click="isShowQueBank">
        <div class="c-flex-grow1">
          <div class="c-fc-xblack c-fs24 c-pv30">练习</div>
          <div class="c-flex-row c-aligni-center " v-if="QuestionBank.length>0">
            <div class="c-fc-xblack c-fs22 c-mb12 c-mr10 c-br16 c-fc-mblue c-ph14 c-pv6 c-bgblue" v-for="(item, index) in QuestionBank" :key="index">{{item}}</div>
          </div>
        </div>
        <div class="iconfont c-fc-sgray c-fs24">&#xe908;</div>
      </div>
      <!-- 范围选择 -->
      <div class="c-flex-row c-aligni-center c-bg-white c-br20 c-mt24 c-pl30 c-pr20 c-pb18" @click="isShowQueRange">
        <div class="c-flex-grow1">
          <div class="c-fc-xblack c-fs24 c-pv30">范围</div>
          <div class="" v-if="QuestionRange.length>0">
            <div class="c-inlineblack c-fc-xblack c-fs22 c-mb12 c-mr10 c-br16 c-fc-mblue c-ph14 c-pv6 c-bgblue" v-for="(item, rindex) in QuestionRange" :key="rindex">{{item}}</div>
          </div>
        </div>
        <div class="iconfont c-fc-sgray c-fs24">&#xe908;</div>
      </div>
      <div class="c-fs26 c-fc-xblack c-mt48 c-fw700 c-mb20">练习模式</div>
      <div class="c-flex-row c-aligni-center ">
        <div class="c-ph18 c-pv10 c-br8 c-bg-white c-fs24 c-mr20" :class="lastChooseType==1?'c-bd1-ssmblue c-fc-mblue':'c-fc-xblack c-bd1-white'" @click="changePattern(1)">顺序练习</div>
        <div class="c-ph18 c-pv10 c-br8 c-bg-white c-fs24"  :class="lastChooseType==2?'c-bd1-ssmblue c-fc-mblue':'c-fc-xblack c-bd1-white'" @click="changePattern(2)">随机练习</div>
      </div>
      <div class="c-hh72 c-flex-grow c-fs28 c-mt160 c-ph48">
        <div class="c-fc-white c-lh c-flex-row c-flex-center c-h c-br36 bg-linearColor" @click="checkUpChange">立即练习</div>
      </div>
    </div>
    <transition name="fade">
      <div ref="confirmModal" v-show="isShowBank" @click.self="clickCancel" class="confirm-modal masker">
        <article class="confirm-content">
          <div class="confirm-title c-textAlign-c c-mb24">练习选择</div>
          <div class="c-maxh280 c-ph40 c-contexty-scroll">
            <div v-for="(item,index) in commonList" class="c-lh54" :key="index">
              <label @click="setCheckId(item)" :for="item.libraryId" class="iconfont c-fs24 c-ww24 c-hh24" :class="item.libraryId==checkId?'icon-duihao1 c-fc-mblue':'icon-weigouxuan c-fc-gray'">
                <input class="choose" type="radio"
                  :id="item.libraryId"
                  :data-id="item.libraryId" name="radio"
                  :value="item.libraryId"
                  v-model="checkId">
                <span class="c-ml10 c-fs24 c-fc-xblack">{{item.name}}</span>
              </label>
            </div>
          </div>
          <footer class="confirm-footer">
            <div @click="clickCancel" class="btn-cancel">取消</div>
            <div @click="clickConfirm" class="btn-confirm c-fc-mblue">确定</div>
          </footer>
        </article>
      </div>
    </transition>
    <transition name="fade">
      <div ref="confirmModal" v-show="isShowRange" @click.self="clickCancel" class="confirm-modal masker">
        <article class="confirm-content">
          <div class="confirm-title c-textAlign-c c-mb20">范围选择</div>
          <div class="c-maxh400 c-contexty-scroll" v-if="datas.length>0">
            <questionTree :treeData='datas' :checkBox='checkbox' ref="vtree"></questionTree>
          </div>
          <footer class="confirm-footer">
            <div @click="clickCancel" class="btn-cancel">取消</div>
            <div @click="findSelected" class="btn-confirm c-fc-mblue">确定</div>
          </footer>
        </article>
      </div>
    </transition>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import questionTree from "@/components/templates/questionTree.vue";
let libraryId = "";
let clickFlag = true
export default {
  name: "setQuestion",
  components: {
    questionTree
  },
  props: [],
  data() {
    return {
      lastChooseType: 1, //练习模式
      testInfo: {},
      isShowBank: false,
      isShowRange: false,
      QuestionBank: [], //练习展示
      checkValue: '', //选择练习
      QuestionRange: [], //练习范围展示
      checkId: '', //选择练习id
      RangeCheckId: [], //选择练习范围id
      checkbox: true, //是否有选择框
      commonList: [], //练习数组
      datas: [],
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  watch: {
    checkId(val) {
      if (libraryId != val) {
        this.datas = []
      }
    }
  },
  methods: {
    //模式修改
    changePattern(lastChooseType) {
      this.lastChooseType = lastChooseType
    },
    //设置选择范围
    findSelected() {
      if (this.checkbox) {
        this.RangeCheckId = this.$refs.vtree.getCheckedNodes().resulIdtArr
        this.QuestionRange = this.$refs.vtree.getCheckedNodes().resulNametArr
      }
      this.isShowRange = false
    },
    //设置选中练习
    setCheckId(item) {
      this.checkValue = item.name
    },
    //练习范围请求
    QuestionData() {
      if (clickFlag) {
        if (libraryId == 0 && this.checkId == '') {
          this.$showCjToast({
            text: "请选择练习",
            type: "warn",
            time: 1500
          });
          clickFlag = true
          return
        }
        utilJs.getMethod(
          global.apiurl + "itemBank/itemTree?libraryId=" + libraryId + '&bindLibraryId=' + this.checkId,
          res => {
            this.commonList = res
            if (res) {
              this.datas = res
              // this.isShowRange = true
            }
          },
          failRes => {
            clickFlag = true
          }
        )
      }
    },
    //显示练习范围
    isShowQueRange() {
      if (this.datas.length == 0) {
        this.$showCjToast({
          text: "没有可选范围",
          type: "warn",
          time: 1500
        })
        return
      }
      this.isShowRange = true
    },
    //显示练习
    isShowQueBank() {
      if (clickFlag) {
        clickFlag = false
        utilJs.getMethod(
          global.apiurl + "itemBank/myItemBank",
          res => {
            this.commonList = res
            if (this.commonList.length > 0) {
              this.isShowBank = true
            } else {
              this.$showCjToast({
                text: "没有练习，请前往购买",
                type: "warn",
                time: 1500
              });
            }
            clickFlag = true
          },
          failRes => {
            clickFlag = true
          }
        )
      }
    },
    //取消
    clickCancel() {
      this.isShowRange = false
      this.isShowBank = false
    },
    //练习确定
    clickConfirm() {
      if (this.checkValue == '') {
        this.$showCjToast({
          text: "请选择练习",
          type: "warn",
          time: 1500
        });
        return
      }
      this.QuestionBank = []
      this.QuestionRange = []
      this.RangeCheckId = []
      this.QuestionBank.push(this.checkValue)
      if (libraryId == 0) {
        libraryId = this.checkId
      }
      this.QuestionData()
      this.isShowBank = false
    },
    //加入考试前检查练习设置是否发生变化
    checkUpChange() {
      let $this = this
      if (this.checkId == '') {
        this.$showCjToast({
          text: "请选择练习",
          type: "warn",
          time: 1500
        });
        return
      }
      if (this.RangeCheckId.length == 0) {
        this.$showCjToast({
          text: "请选择练习范围",
          type: "warn",
          time: 1500
        });
        return
      }
      let data = {
        libraryId: libraryId, //详情带过来的练习ID
        bindLibraryId: this.checkId, //绑定的练习Id
        scope: this.RangeCheckId, //范围
      }
      utilJs.postMethod(`${global.apiurl}itemBank/checkUpChange`, data, function (
        res
      ) {
        if (res.code == 3) {
          $this.$showCjToast({
            text: res.msg,
            type: "warn",
            time: 1500
          });
          return
        } else if (res.code == -1) {
          $this.$cjConfirm({
            title: '提示',
            titleCenter: true, //标题是否居中
            message: res.msg, //弹窗内容
            messageCenter: true, //内容是否居中
            showMasker: true, //是否显示透明背景
            clickCloseModal: false, //是否点击透明背景关闭弹窗
            showCancelButton: true, //是否显示取消按钮
            cancelButtonText: '', //取消按钮文本
            confirmButtonText: '', //确认按钮文本
            onConfirm() {
              $this.takePartIn(1)
            }, //确认事件回调
            onCancel: null, //取消事件回调
          })
          return
        } if (res.code == 2) {
          $this.takePartIn()
        } else {
          if (!res.permission) {
            $this.$showCjToast({
              text: '该练习无权限',
              type: "warn",
              time: 1500
            });
            return
          }
          if ($this.lastChooseType == 1) {
            //顺序考试状态  -1未开始  0进行中  1已完成
            if (res.orderTestStatus == -1) {
              $this.takePartIn()
            } else if (res.orderTestStatus == 0) {
              $this.$routerGo($this, "push", {
                path: '/homePage/itemBank/questionAnswer',
                query: {
                  libraryId: libraryId,
                  type: $this.lastChooseType,
                  goOnNum: res.orderTestNum,
                  ttId: $this.ttId,
                  tpId: $this.tpId,
                  tlId: $this.tlId,
                  progress: $this.progress,
                }
              })
            } else {
              $this.$routerGo($this, "push", {
                path: '/homePage/itemBank/questionResult',
                query: {
                  libraryId: libraryId,
                  type: $this.lastChooseType,
                  ttId: $this.ttId,
                  tpId: $this.tpId,
                  tlId: $this.tlId,
                  progress: 100,
                }
              })
            }
          } else {
            //随机考试状态  -1未开始  0进行中  1已完成
            if (res.randomTestStatus == -1) {
              $this.takePartIn()
            } else if (res.randomTestStatus == 0) {
              $this.$routerGo($this, "push", {
                path: '/homePage/itemBank/questionAnswer',
                query: {
                  libraryId: libraryId,
                  type: $this.lastChooseType,
                  goOnNum: res.randomTestNum,
                  ttId: $this.ttId,
                  tpId: $this.tpId,
                  tlId: $this.tlId,
                  progress: $this.progress,
                }
              })
            } else {
              $this.$routerGo($this, "push", {
                path: '/homePage/itemBank/questionResult',
                query: {
                  libraryId: libraryId,
                  type: $this.lastChooseType,
                  ttId: $this.ttId,
                  tpId: $this.tpId,
                  tlId: $this.tlId,
                  progress: 100,
                }
              })
            }
          }
        }
      })
    },
    //加入考试
    takePartIn(isChange) {
      let $this = this
      let data = {
        libraryId: libraryId, //详情带过来的练习ID
        bindLibraryId: $this.checkId, //绑定的练习Id
        scope: $this.RangeCheckId, //范围
        type: $this.lastChooseType, //模式
        isChange: isChange
      }
      utilJs.postMethod(`${global.apiurl}itemBank/takePartIn`, data, function (
        res
      ) {
        $this.$routerGo($this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: {
            libraryId: libraryId,
            type: $this.lastChooseType,
            goOnNum: 1,
            ttId: $this.ttId,
            tpId: $this.tpId,
            tlId: $this.tlId,
            progress: $this.progress,
          }
        })
      })
    },
    //初始化数据
    initData() {
      utilJs.getMethod(
        global.apiurl + "itemBank/installInfo/" + libraryId,
        res => {
          this.testInfo = res
          if (this.testInfo.length != 0) {
            if (this.testInfo.name != '') {
              this.QuestionBank.push(this.testInfo.name)
            }
            this.QuestionRange = this.testInfo.scopeName
            libraryId = this.testInfo.libraryId
            this.checkId = this.testInfo.bindLibraryId ? this.testInfo.bindLibraryId : this.testInfo.libraryId
            this.checkValue = this.testInfo.name
            this.RangeCheckId = this.testInfo.scope
            this.lastChooseType = this.testInfo.lastChooseType
            this.QuestionData()
          } else {
            libraryId = 0;
            this.commonList = []
            this.datas = []
            this.checkId = []
            this.RangeCheckId = []
            this.QuestionBank = []
            this.QuestionRange = []
          }
          this.wechatShare();
        }
      )
    },
    //分享
    wechatShare: function () {
      let title = "练习设置"; //window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl = ''
      // if (libraryId == 0) {
      shareUrl = window.location.href.split("#")[0] +
        "#" +
        this.$route.path + "?refereeId=" +
        localStorage.getItem("userId")
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl = ''
      // if (libraryId == 0) {
      shareUrl = window.location.href.split("#")[0] +
        "#" +
        this.$route.path + "?refereeId=" +
        localStorage.getItem("userId")
      utilJs.appShareTrue("", "练习设置", shareUrl, "");
    },
  },
  activated() {
    setDocumentTitle("练习设置");// eslint-disable-line
    libraryId = this.$route.query.libraryId || 0;
    this.commonList = []
    this.datas = []
    this.QuestionBank = []
    this.QuestionRange = []
    this.isShowRange = false
    this.isShowBank = false
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    this.initData();
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.c-bd1-white{
  border:1px solid #ffffff;
}
.c-bgblue{
  background:rgba(108,131,255,0.1);
}
.masker {
  background-color: rgba(0, 0, 0, 0.5);
}
.confirm-modal {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  opacity: 1;
}
.confirm-content {
  width: 13.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  padding-top: 1.5rem;
}
.confirm-title {
  color: #333;
  font-weight: bold;
  font-size: 0.7rem;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.btn-cancel {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #f6f6f6;
  width: 0;
  height: 1.85rem;
  color: #666;
  font-size: 0.7rem;
}
.btn-confirm {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 1.85rem;
  font-size: 0.7rem;
}
.confirm-footer {
  margin-top: 1rem;
  border-top: 1px solid #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg-linearColor{
  background: linear-gradient(90deg,#9aaaff, #6c83ff);
}
.choose{display: none;}
</style>


